<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link href="../css/aui.css" rel="stylesheet" type="text/css"/>
	<link href="../css/aui-iconfont.css" rel="stylesheet"/>
	<link href="../css/index.css" rel="stylesheet" type="text/css"/>
	<link rel="stylesheet" href="../js/jstree/themes/default/style.min.css" />
	<link href="../css/frm1.css" rel="stylesheet"/>
</head>
<body>
<div id="body">
	<div id="componentLib" class="scrollbar" onmousewheel="componentLibOnmousewheel()">

	</div>
	<div id="UIBox"  class="scrollbar">
		<div id="UIBar">

		</div>
		<div id="UIDisplay">
			<div id="UIDisplayBar">
				<div id="left">中国移动 4G </div>
				<div id="time">11:25</div>
			</div>
			<div id="pageBar">
				<div id="left"><i class="aui-iconfont aui-icon-left"></i></div>
				<div id="title">安装详细内容</div>
				<div id="right"><i class="aui-iconfont aui-icon-more"></i></div>
			</div>
			<div id="tabBar"></div>
			<div id="pageView"  class="scrollbar hide" onmousewheel="componentLibOnmousewheel();">
			</div>
		</div>
	</div>
	<div id="configBox"  class="scrollbar">
		<div id="controlBtns">
			<button class="aui-btn aui-btn-primary">预览</button>
			<button class="aui-btn aui-btn-success">配置信息</button>
			<button class="aui-btn aui-btn-info">生成代码</button>
		</div>
		<div id="configForm">

		</div>
	</div>
</div>
<div id="dragView" onmousewheel="dragViewOnmousewhell(this)" onmouseleave="componentLibOnmousewheel()"></div>
<script src="../js/template.js" type="text/javascript"></script>
<script src="../js/api.js" type="text/javascript"></script>
<script src="../js/mousedrag.js" type="text/javascript"></script>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jstree/jstree.min.js" type="text/javascript"></script>

<script id="componentDom" type="text/html">
	{{ for(var i in it) { }}
	<div class="component" data-type="{{=it[i][1]}}" id="component_{{=it[i][1]}}" onmouseenter="componentMouseebter(this)">
		<div class="componentName">{{=it[i][0]}}</div>
		<div class="componentIcon"><i class="aui-iconfont aui-icon-list"></i></div>
	</div>
	{{ } }}
	<div class="component add">
		<div class="componentName">新增</div>
		<div class="componentIcon"><i class="aui-iconfont aui-icon-add1"></i></div>
	</div>
</script>
<script id="pageDom" type="text/html">
	{{ for(var i in it) { }}
	<div class="uibar-item  toppage-item {{? it[i].active }} active {{?}}" id="page_{{=it[i].id}}">
		<div class="uibar-item-name">
			<span onclick="showPageSelect('{{=it[i].id}}','{{=it[i].name}}')">{{=it[i].name}}</span>
			<i class="aui-iconfont aui-icon-edit"  onclick="showPageAdd('{{=it[i].id}}','{{=it[i].name}}')"></i>
			<i class="aui-iconfont aui-icon-delete"  onclick="showPageDel('{{=it[i].id}}','{{=it[i].name}}')"></i>
		</div>
	</div>
	{{ } }}
	<div class="uibar-item" onclick="showPageAdd('','');" id="page_">
		<div class="uibar-item-name">
			新增
			<i class="aui-iconfont aui-icon-add1"></i>
		</div>
	</div>
</script>

<script id="tabDom" type="text/html">
	{{ for(var i in it) { }}
	<div class="tab-item {{? it[i].active }} active {{?}}"  data-id="{{=it[i].id}}"  id="tab_{{=it[i].id}}">
		<div class="tab-item-name">
			<span onclick="showTabSelect('{{=it[i].id}}','{{=it[i].name}}')">{{=it[i].name}}</span>
			<i class="aui-iconfont aui-icon-edit" onclick="showTabAdd('{{=it[i].id}}','{{=it[i].name}}','{{=it[i].orderBy}}')"></i>
			<i class="aui-iconfont aui-icon-delete" onclick="showTabDel('{{=it[i].id}}','{{=it[i].name}}')"></i>
		</div>
	</div>
	{{ } }}
	<div class="tab-item"  onclick="showTabAdd('','','');" id="tab_">
		<div class="tab-item-name">
			新增
			<i class="aui-iconfont aui-icon-add1"></i>
		</div>
	</div>
</script>

<script id="itemDom" type="text/html">
	{{ for(var i in it) { }}
	<div class="page-item" data-type="{{=it[i].type}}" data-id="{{=it[i].id}}" id="pageItem_{{=it[i].id}}">
		<div class="page-tool-box">
			<span class="page-name">{{=it[i].name}}</span>
			<div class="page-tool">
				<span class="tool-move" onmouseenter="pageItemOnmouseenter(this)"><i class="aui-iconfont aui-icon-list"></i>拖动</span>
				<span class="tool-copy"><i class="aui-iconfont aui-icon-copy"></i>复制</span>
				<span class="tool-edit"><i class="aui-iconfont aui-icon-edit"></i>编辑</span>
				<span class="tool-delete" onclick="deleteItem('{{=it[i].id}}')"><i class="aui-iconfont aui-icon-delete"></i>删除</span>
			</div>
		</div>
		<div class="page-content">
			<div class="page-input">
				<input type="text" class="input-title" placeholder="标题" value="{{=it[i].title}}"/>
				<input type="text" class="input-tips" placeholder="默认提示"/>
			</div>
		</div>
	</div>
	{{ } }}
</script>

<script id="pageEdit" type="text/html">
	<div class="form hide">
		<div class="form-title">ID</div>
		<div class="form-input">
			<input type="text" id="pageId" placeholder="请输入ID"/>
		</div>
	</div>
	<div class="form">
		<div class="form-title">页面标题</div>
		<div class="form-input">
			<input type="text" id="pageName" placeholder="请输入标题"/>
		</div>
	</div>
	<div class="form">
		<button class="aui-btn aui-btn-primary form-btn" id="pageEditSave" onclick="pageEditSave();">
			保存
		</button>
	</div>
</script>
<script id="tabEdit" type="text/html">
	<div class="form hide">
		<div class="form-title">ID</div>
		<div class="form-input">
			<input type="text" id="tabId" placeholder="请输入ID"/>
		</div>
	</div>
	<div class="form">
		<div class="form-title">分页标题</div>
		<div class="form-input">
			<input type="text" id="tabName" placeholder="请输入标题"/>
		</div>
	</div>
	<div class="form">
		<div class="form-title">排序</div>
		<div class="form-input">
			<input type="number" id="tabOrderBy" placeholder="请输入序号"/>
		</div>
	</div>
	<div class="form">
		<button class="aui-btn aui-btn-primary form-btn" id="tabEditSave" onclick="tabEditSave();">
			保存
		</button>
	</div>
</script>
<script id="formEdit" type="text/html">
	<div class="form">
		<div class="form-title">ID</div>
		<div class="form-input">
			<input type="text" id="formId" placeholder="请输入ID"/>
		</div>
	</div>
	<div class="form">
		<div class="form-title">标题</div>
		<div class="form-input">
			<input type="text" id="formBt" placeholder="请输入标题"/>
		</div>
	</div>
	<div class="form">
		<div class="form-title">是否启用</div>
		<div class="form-input">
			<div class="icon_switch icon_switch_open" id="formSfqy"></div>
		</div>
	</div>
	<div class="form">
		<div class="form-title">是否必填</div>
		<div class="form-input">
			<div class="icon_switch" id="formSfbt"></div>
		</div>
	</div>
	<div class="form">
		<div class="form-title">默认提示</div>
		<div class="form-input">
			<input type="text" id="formMrts" placeholder="请输入默认提示"/>
		</div>
	</div>
	<div class="form">
		<div class="form-title">单位</div>
		<div class="form-input">
			<input type="text" id="formDw" placeholder="请输入单位"/>
		</div>
	</div>
	<div class="form">
		<div class="form-title">最大长度</div>
		<div class="form-input">
			<input type="text" id="formZdcd" placeholder="请输入最大长度"/>
		</div>
	</div>
	<div class="form">
		<div class="form-title">正则验证</div>
		<div class="form-input">
			<textarea placeholder="请输入正则验证，多个用;分割" id="formZzyz"></textarea>
		</div>
	</div>

	<div class="form">
		<div class="form-title">正则验证提示</div>
		<div class="form-input">
			<textarea placeholder="请输入正则验证提示，多个用;分割" id="formZzyzts"></textarea>
		</div>
	</div>

	<div class="form">
		<div class="form-title">API接口</div>
		<div class="form-input">
			<select>
				<option>请选择API接口</option>
			</select>
		</div>
	</div>

	<div class="form">
		<div class="form-title">数据源</div>
		<div class="form-input">
			<select>
				<option>请选择API数据源</option>
			</select>
		</div>
	</div>

	<div class="form">
		<div class="form-title">动作</div>
		<div class="form-input">
			<select>
				<option>请选择处理动作</option>
			</select>
		</div>
	</div>

</script>

<script type="text/javascript">

    //控件
    var component = [
        ["默认输入框",0],
        ["默认选择框",1],
        ["日期选择框",2],
        ["多行文本输入框",3],
        ["单选框",4],
        ["标题栏",5],
        ["图片列表",6],
        ["视频列表",7],
        ["分割线",8],
        ["选择框(带按钮)",9],
        ["开关",10],
        ["按钮组",11],
        ["选择框(带按钮,可编辑文本)",12],
        ["数字输入框",13],
        ["图文框",14],
        ["多条件筛选框",15],
        ["选择框(带按钮,删除)",16],
        ["多选框",17],
        ["密码输入框",18],
        ["单选框(横向)",19],
        ["单选框(横向)",19],
    ];

    //页面
    var pages = [
        {"name":"安装详细内容","id":"123","active":true},
        {"name":"维修详细内容","id":"123","active":false},
        {"name":"安装详细内容撒旦发射点","id":"123","active":false}
    ];

    //选项卡
    var tabs = [
        {"name":"基本信息","id":"u89","active":true},
        {"name":"销售信息","id":"u89","active":false},
        {"name":"产品信息","id":"u89","active":false},
        {"name":"操作明细情况","id":"u89","active":false},
        {"name":"完工明细","id":"u89","active":false},
        {"name":"审批记录","id":"u89","active":false},
    ];

    var items = [
        {"name":"当时法国","type":0,"title":"标题","id":"gdfg"},
        {"name":"告诉对方韩国","type":0,"title":"标题","id":"hdfgdfg"},
        {"name":"告诉对方","type":0,"title":"标题","id":"hdfgd"},
        {"name":"肌肤光滑","type":0,"title":"标题","id":"sdfsdf"},
        {"name":"公司的好好干","type":0,"title":"标题","id":"hdfd"},
        {"name":"鄂尔泰","type":0,"title":"标题","id":"sdgg"},
        {"name":"发给甲方给","type":0,"title":"标题","id":"sdhqd"},
        {"name":"交付给回复给","type":0,"title":"标题","id":"gsds33"},
        {"name":"结果返回反对法","type":0,"title":"标题","id":"gsd32d"},
        {"name":"幅度会很大","type":0,"title":"标题","id":"hhddd"},
        {"name":"和豆腐干豆腐干","type":0,"title":"标题","id":"se43"},
        {"name":"和豆腐干地方和","type":0,"title":"标题","id":"ghfdf"}
    ];



    //载入完成执行
    $api.onReady(function(){
        init();
    });

    var suffix = "exec_autopage.task.";
    //执行本页面的task
    function call(action,data,fn){
        var obj = {};
        obj.action = action;
        obj.data = data;
        $api.call(suffix+"AutoPageTask",obj,fn);
    }

    ////////////////////页面增删改开始///////////////////////////
    var selectPageId;
    function showPageSelect(id,name){
        if(id!=''){
            $api.removeCls($api.dom(".toppage-item.active"),"active");
            var dom = $api.byId("page_"+id);
            $api.addCls(dom,"active");
            call("updatePageActive",{"id":id,"active":true},function(res,err){
            });
            this.selectPageId = id;
            getPage(id);
        }
    }
    //编辑页面标题
    function showPageAdd(id,name){
        $api.templateToDom("pageEdit","configForm");
        $api.val($api.byId("pageId"),id);
        $api.val($api.byId("pageName"),name);
        if(id!=''){
            $api.html($api.byId("pageEditSave"),"修改");
        }else{
            $api.html($api.byId("pageEditSave"),"新增");
        }
    }
    //删除
    function showPageDel(id,name){
        if(id!=''){
            call("deletePage",{"id":id},function(res,err){
                getAllPages();
            });
        }
    }
    //保存页面标题
    function pageEditSave(){
        var pageId = $api.val($api.byId("pageId"));
        var pageName = $api.val($api.byId("pageName"));
        if(pageName!=""){
            call("saveOrUpdatePage",{"id":pageId,"name":pageName},function(res,err){
                if(res){
                    $api.val($api.byId("pageId"),res.id);
                    $api.html($api.byId("pageEditSave"),"修改");
                    getAllPages();
                }else{
                    tips("保存失败!");
                }
            });
        }
    }

    ////////////////////////////////页面增删改结束///////////////////////////////


    //////////////////////////////tab增删改开始////////////////////////////
    function showTabSelect(id,name){
        if(id!=''){
            $api.removeCls($api.byId("pageView"),"hide");
            $api.removeCls($api.dom(".tab-item.active"),"active");
            var dom = $api.byId("tab_"+id);
            $api.addCls(dom,"active");
            call("getTab",{"id":id,"pageId":selectPageId},function(res,err){
                var itemsHtml = $api.template("itemDom",res);
                $api.html($api.byId("pageView"),itemsHtml);
            });
        }
    }
    //编辑页面标题
    function showTabAdd(id,name,orderBy){
        $api.templateToDom("tabEdit","configForm");
        $api.val($api.byId("tabId"),id);
        $api.val($api.byId("tabName"),name);
        $api.val($api.byId("tabOrderBy"),orderBy);
        if(id!=''){
            $api.html($api.byId("tabEditSave"),"修改");
        }else{
            var orderBy = 0;
            if(pageDetail.tabs!=null){
                orderBy = pageDetail.tabs.length;
            }
            $api.val($api.byId("tabOrderBy"),orderBy);
            $api.html($api.byId("tabEditSave"),"新增");
        }
    }
    //删除
    function showTabDel(id,name){
        if(id!=''){
            call("deleteTab",{"id":id},function(res,err){
                getPage(selectPageId);
            });
        }
    }

    function deleteItem(id){
        call("deleteItem",{"id":id},function(res,err){
            $api.remove($api.byId("pageItem_"+res));
        });
    }

    function tabEditSave(){
        var tabId = $api.val($api.byId("tabId"));
        var tabName = $api.val($api.byId("tabName"));
        var orderBy = $api.val($api.byId("tabOrderBy"));
        if(tabName!=""){
            call("saveOrUpdateTab",{"id":tabId,"name":tabName,"pageId":selectPageId,"orderBy":orderBy},function(res,err){
                if(res){
                    $api.val($api.byId("tabId"),res.id);
                    $api.html($api.byId("tabEditSave"),"修改");
                    getPage(selectPageId);
                }else{
                    tips("保存失败!");
                }
            });
        }
    }

    ////////////////////////////tab增删改结束//////////////////////////////////

    /**
     * 获取页面数据
     */
    var pageDetail;
    function getPage(pageId){
        call("getPage",{"id":pageId},function(res,err){
            pageDetail = res;
            $api.html($api.byId("title"),res.name);
            var tabsHtml = $api.template("tabDom",res.tabs);
            $api.html($api.byId("tabBar"),tabsHtml);
            var hasData = false;
            if(res.tabs!=null){
                for(var t  =0 ; t < res.tabs.length;t++){
                    if(res.tabs[t].active){
                        hasData = true;
                        var itemsHtml = $api.template("itemDom",res.tabs[t].items);
                        $api.html($api.byId("pageView"),itemsHtml);
                        $api.removeCls($api.byId("pageView"),"hide");
                        break;
                    }
                }
            }
            if(!hasData){
                $api.html($api.byId("pageView"),"");
                $api.addCls($api.byId("pageView"),"hide");
            }
        });
    }

    //获取所有页面
    function getAllPages(){
        call("getAllPage",{},function(res,err){
            var pagesHtml = $api.template("pageDom",res);
            $api.html($api.byId("UIBar"),pagesHtml);
            for(var i = 0 ; i < res.length ;i++){
                if(res[i].active){
                    getPage(res[i].id);
                    break;
                }
            }
        });
    }

    //获取控件列表
    function getComponent(){
        call("getComponent",{},function(res,err){
            var componentHtml = $api.template("componentDom",res);
            $api.html($api.byId("componentLib"),componentHtml);
            getAllPages();
        });
    }

    function editItem(id){
        var formEditHtml = $api.template("formEdit",{});
        $api.html($api.byId("configForm"),formEditHtml);
    }

    function init(){
        checkTime();
        getComponent();
        initDrap();
    }

    function getComponentByType(type){
        for(var i in component){
            if(component[i][1]==type){
                return component[i];
            }
        }
        return null;
    }

    function initDrap(){
        $drag.bind("dragView","pageView",function(type,className,e){
            switch(type){
                case "onmouseup":
                    var dom = $api.byId("dragView").firstChild;
                    var type = $api.attr(dom,"data-type");
                    var id = $api.attr(dom,"data-id");
                    onDrapItem(type,id);
                    break;
            }
        });
    }
    function onDrapItem(type,id){
        if(id==null){
            var comp = getComponentByType(type);
            if(comp!=null){
                var putplace = $api.byId("page-item-putplace");
                var orderBy = $(putplace).index(this);
                var tabId = $api.attr($api.dom(".tab-item.active"),"data-id");
                call("getNewItem",{"tabId":tabId,"type":type,"orderBy":orderBy},function(res,err){
                    var data = [res];
                    var itemsHtml = $api.template("itemDom",data);
                    var putplace = $api.byId("page-item-putplace");
                    $(putplace).after(itemsHtml);
                    setTimeout(function(){
                        $api.remove(putplace);
                    },1);
                });
            }
        }else{

        }
    }

    //组件选区进入
    function componentMouseebter(dom){
        var html = dom.outerHTML;
        html = html.replace("onmouseenter","");
        var drag = $api.byId("dragView");
        $api.html(drag,html);
        drag.style.left = $drag.getRect(dom).left+"px";
        drag.style.top = $drag.getRect(dom).top+"px";
        drag.style.display = "flex";
    }
    //拖拉目标 滚动鼠标
    function dragViewOnmousewhell(dom){
        dom.style.display = "none";
    }
    //组件选区 滚动鼠标
    function componentLibOnmousewheel(){
        var drag = $api.byId("dragView");
        drag.style.display = "none";
    }
    //放置区 拖动
    function pageItemOnmouseenter(childDom){
        var currentPageItem = childDom.parentElement.parentElement.parentElement;
        var html = currentPageItem.outerHTML;
        //避免出现重复的id
        html = html.replace("id=","attr-id=");
        var drag = $api.byId("dragView");
        $api.html(drag,html);
        drag.style.left = $drag.getRect(currentPageItem).left+"px";
        drag.style.top = $drag.getRect(currentPageItem).top+"px";
        drag.style.display = "flex";
    }

    //init();
    //检查时间
    function checkTime(){
        var date = new Date();
        var hour = date.getHours();
        var minute = date.getMinutes();
        if(hour<10){
            hour = "0"+hour;
        }
        if(minute<10){
            minute = "0"+minute;
        }
        $api.html($api.byId("time"),hour+":"+minute);
        setTimeout(function(){
            checkTime();
        },3000);
    }
</script>
</body>
</html>
